<template>
  <div class="app" :class="{ 'loading': isLoading }">
    <AppHeader />
    <main class="main-content">
      <NuxtPage />
    </main>
    <AppFooter />
    <Notification />
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from '~/composables/useStore'
import { onMounted } from 'vue'

const { isLoading, checkAuth } = useStore()

// 检查用户认证状态
onMounted(async () => {
  await checkAuth()
})
</script>

<style>
@import '~/assets/css/global.css';

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.main-content {
  flex: 1;
  padding: 24px 0;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 暗色主题样式 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --text-secondary: #a0a0a0;
  --border-color: #333333;
  --bg-secondary: #2a2a2a;
}

[data-theme="dark"] .loading-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
</style>
